import 'ol/ol.css';
import {FunctionComponent, useEffect, useRef} from 'react';
import { Map, View,Feature,Overlay  } from 'ol';
import { Image as ImageLayer,Vector as VectorLayer } from 'ol/layer';
import { ImageStatic,Vector } from 'ol/source';
import {Style,Fill,RegularShape,Stroke} from "ol/style"
import React from 'react';
import  "./Map.css";

function getStyle(feature) {
    return new Style({
        fill: new Fill({
            color: 'rgba(255, 255, 255, 1)'
        }),
        stroke: new Stroke({
            color: '#3399CC',
            width: 2
        }),
        image: new RegularShape({
            fill: new Fill({
                color: 'rgba(0, 0, 255, 1)'
            }),
            stroke: new Stroke({
                color: '#000',
                width: 1
            }),
            points: 4, // 四个角
            radius: 20, // 半径
            angle: Math.PI / 4 // 旋转角度
        })
    });
}

const MapComponent = () => {
    const mapRef = useRef();
    useEffect(() => {
        if (!mapRef.current) return;
        debugger;
        const imageSource=new ImageStatic({
            url: '/m3.png',
            projection: 'EPSG:3857',
            imageExtent: [1267/5, 826/5, 1267/1.5, 826/1.5],
            zoom:4

        });
        imageSource.on('error', function(event) {
               console.error('Error loading image:', event);
        });
        const imageLayer = new ImageLayer({
            source: imageSource
        });
        const mapObj = new Map({
            view: new View({
                center: [0, 0],
                zoom:1,
                extent: [0, 0, 1267, 826]
            }),
              layers: [imageLayer],
        });
        mapObj.setTarget(mapRef.current);
        return () => mapObj.setTarget('');
    }, []);
    return <div className="map" ref={mapRef} />;
};

export default MapComponent;